<template >
  <a-spin :spinning="loading" >
  <a-card :bordered="false"  >
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <!-- useful_auto_generate_section_start -->

          <a-col :md="6" :sm="12">
            <a-form-item label="编码">
              <a-input v-model="queryParam.code" placeholder="请输入编码" />
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item label="生产日期">
              <a-range-picker v-model="queryParam.gmtBuild" :style="{width: '230px'}" :placeholder="['开始时间', '结束时间']" format="YYYY-MM-DD" @change="(v)=>handleRangeDateChange(v,{startProperty:'gmtBuildStart',endProperty:'gmtBuildEnd',format:'YYYY-MM-DD'})" />
<!--              <a-date-picker v-model="queryParam.gmtBuild" placeholder="请选择生产日期" format="YYYY-MM-DD" />-->
            </a-form-item>
          </a-col>

           <a-col :md="6" :sm="12">
              <a-form-item label="类型">
                <a-select v-model="queryParam.type" :options="typeOptions"  />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="位置">
                <a-cascader v-model="queryParam.positionCodeList"  :options="positionOptions" :show-search="{filter}" placeholder="请选择位置" :field-names="{ label: 'title', value: 'code',children:'children' }" />
              </a-form-item>
            </a-col>

          <a-col :md="6" :sm="12">
            <a-form-item label="状态">
              <a-select v-model="queryParam.status" :options="statusOptions"  />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="核查用户">
              <a-select v-model="queryParam.auditUserId" :options="auditUserIdOptions"  />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item label="核查时间">
              <a-range-picker v-model="queryParam.gmtAudit" :style="{width: '230px'}" :placeholder="['开始时间', '结束时间']" format="YYYY-MM-DD" @change="(v)=>handleRangeDateChange(v,{startProperty:'gmtAuditStart',endProperty:'gmtAuditEnd'})" />
<!--              <a-date-picker v-model="queryParam.gmtAudit" placeholder="请选择核查时间" format="YYYY-MM-DD" />-->
            </a-form-item>
          </a-col>
                    <!-- useful_auto_generate_section_end -->

          <template v-if="toggleSearchStatus">
            <!-- useful_auto_generate_section_start -->
            <a-col :md="8" :sm="12">
              <a-form-item label="创建时间">
                <a-range-picker v-model="queryParam.gmtCreate" :style="{width: '230px'}" :placeholder="['开始时间', '结束时间']" format="YYYY-MM-DD" @change="(v)=>handleRangeDateChange(v,{startProperty:'gmtCreateStart',endProperty:'gmtCreateEnd'})" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="12">
              <a-form-item label="修改时间">
                <a-range-picker v-model="queryParam.gmtModified" :style="{width: '230px'}" :placeholder="['开始时间', '结束时间']" format="YYYY-MM-DD" @change="(v)=>handleRangeDateChange(v,{startProperty:'gmtModifiedStart',endProperty:'gmtModifiedEnd'})" />
              </a-form-item>
            </a-col>

            <!-- useful_auto_generate_section_end -->


          </template>

          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>

      <a-button type="primary" icon="printer" @click="printQr">打印二维码</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('消防设备信息')">导出</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importXlsUrl" @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>

      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete"/>
            删除
          </a-menu-item>
          <a-menu-item key="2" @click="batchPrint">
            <a-icon type="print"/>
            打印
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;" v-if="selectedRowKeys.length > 0">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
        selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

            <a-table
              ref="table"
              size="middle"
              :scroll="{x:true}"
              bordered
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
              class="j-table-force-nowrap"
              @change="handleTableChange">



              <span slot="action" slot-scope="text, record">
                <a @click="handleEdit(record)">编辑</a>

                <a-divider type="vertical" />
                <a-dropdown>
                  <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <a @click="handleDetail(record)">详情</a>
                    </a-menu-item>

                    <a-menu-item>
                      <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                        <a>删除</a>
                      </a-popconfirm>
                    </a-menu-item>


                  </a-menu>
                </a-dropdown>
              </span>

            </a-table>

    </div>

    <fireDevice-modal ref="modalForm" @ok="modalFormOk"></fireDevice-modal>
  </a-card>
  </a-spin>

</template>

<script>


  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { FormMixin } from '@/mixins/FormMixin'
  import FireDeviceModal from './FireDeviceModal'
  import { getDataOptionList } from '@/utils/util'
  import { requestSetOptions,requestSetData } from '@/utils/commonUtils'
  import moment from 'moment'
  import {getAction, postAction} from "../../../api/manage";

  export default {
    name: 'FireDeviceList',
    mixins: [JeecgListMixin, FormMixin,mixinDevice],
    components: {
      FireDeviceModal,
    },
    data() {
      return {
        description: '',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            // fixed: 'left',
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },

          //useful_auto_generate_section_start
          {
          title: '编码',
          dataIndex: 'code',
          width: 100,
          align: 'center',
          },
          {
            title: '类型',
            dataIndex: 'typeDict.name',
            width: 100,
            align: 'center',
          },
          {
            title: '位置',
            dataIndex: 'positionText',
            width: 100,
            align: 'center',
          },
          {
          title: '生产日期',
          dataIndex: 'gmtBuild',
          width: 100,
          align: 'center',
          },
          {
            title: '状态',
            dataIndex: 'statusEnum.text',
            width: 100,
            align: 'center',
          },
          {
            title: '核查用户',
            dataIndex: 'auditUserName',
            width: 100,
            align: 'center',
          },

          {
          title: '核查时间',
          dataIndex: 'gmtAudit',
          width: 100,
          align: 'center',
          },
          {
          title: '创建时间',
          dataIndex: 'gmtCreate',
          width: 100,
          align: 'center',
          },
          {
          title: '修改时间',
          dataIndex: 'gmtModified',
          width: 100,
          align: 'center',
          },

          //useful_auto_generate_section_end
          {
            title: '操作',
            dataIndex: 'action',
            fixed:'right',
            scopedSlots: {customRender: 'action'},
            align: "center",
            width: 170
          }

        ],

        url: {
          list: '/extinguisher/fireDevice/list',
          delete: '/extinguisher/fireDevice/del',
          deleteBatch: '/extinguisher/fireDevice/del',
          exportXlsUrl:'/extinguisher/fireDevice/exportExcel',
          importXlsUrl:'extinguisher/fireDevice/importExcel',

        },
      //useful_auto_generate_section_start
      statusOptions:getDataOptionList('deviceAuditRecordStatusEnum'),
        auditUserIdOptions:[],
        typeOptions:getDataOptionList('fireDeviceType'),
      //useful_auto_generate_section_end
        positionOptions:[],
        filter:(inputValue, path) => {
          return path.some(option => option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
        },
        superFieldList: [],
      }
    },
    created() {

      let $this = this;
      //useful_auto_generate_section_start
      requestSetOptions("/user/user/listAll",{},function(options){$this.auditUserIdOptions=options;},{label:'userName',value:'id'});
      //useful_auto_generate_section_end
      requestSetData("/system/dataDict/listTree",{value:'fireDevicePosition'},function(options){$this.positionOptions=options[0].children;},{});


    },
    computed: {
      importXlsUrl: function () {
        return `${window._CONFIG['domianURL']}${this.url.importXlsUrl}`
      },
    },
    methods: {
      initDictConfig() {
      },
      initRefresh(nodeId){
        // if(nodeId.startsWith("a")){
        //   this.queryParam.articleId = nodeId.substr(1,nodeId.length-1);
        //   this.searchQuery();
        // }

      },

      exportExcel(){
        let $this = this;
        getAction("/extinguisher/fireDevice/exportExcel",$this.queryParam);
      },
      batchExecuteValidate(){
        let $this = this;
        if ($this.selectedRowKeys.length <= 0) {
          this.$message.warning('请至少选择一条记录！');
          return false;
        }

        return true;
      },
      batchPrint(){
        let $this = this;
        if (!$this.batchExecuteValidate()) {
          return;
        }
        $this.loading = true;
        $this.printContent = "";
        let url = "/extinguisher/fireDevice/qrCodePrint";
        getAction(url,$this.queryParam).then((res)=>{
          if(res.success){
            $this.$print("#devicePrint",{isDyText:true,content:res.data});

          }else{
            $this.$message.warning(res.message);
          }
        }).finally(() => {
          $this.loading = false;
        })

      },

      printQr(){
        let $this = this;
        $this.loading = true;
        $this.printContent = "";
        let url = "/extinguisher/fireDevice/qrCodePrint";
        getAction(url,$this.queryParam).then((res)=>{
          if(res.success){
            $this.$print("#devicePrint",{isDyText:true,content:res.data});

          }else{
            $this.$message.warning(res.message);
          }
        }).finally(() => {
          $this.loading = false;
        })
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
